<template>
    <div class="chart-wrapper">
        <el-row>
            <el-col :span="16">
                <el-card class="comsume-power-wrapper">
                    设备耗电
                    <el-table>
                        <el-table-column label="站点名称"></el-table-column>
                        <el-table-column label="电量/度"></el-table-column>
                    </el-table>
                </el-card>
                <el-card class="charge-abnormal-wrapper">
                    充电异常
                    <el-table>
                        <el-table-column label="站点名称"></el-table-column>
                        <el-table-column label="充电口"></el-table-column>
                        <el-table-column label="异常信息"></el-table-column>
                        <el-table-column label="时间"></el-table-column>
                    </el-table>
                </el-card>
                <el-card class="profit-wrapper">
                    当日收益营业额
                    <div id="profit" style="width:100%;height:200px;"></div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="eqiupment-dlivery-wrapper">
                    <div>充电桩设备投放</div> 
                    <div class="gateway">
                        <div>网关数量</div>
                        <div class="count">{{gateway_total_count}}</div>
                    </div>
                    <div class="device">
                        <div>口子数量</div>
                        <div class="count">{{device_total_count}}</div>
                    </div>
                </el-card>
                <el-card class="eqiupment-dlivery-wrapper">
                    <div>订单</div> 
                    <div class="gateway">
                        <div>订单总数</div>
                        <div class="count">{{order_count}}</div>
                    </div>
                    <div class="device">
                        <div>订单总收益</div>
                        <div class="count">{{total_profit}}</div>
                    </div>
                </el-card>
                <el-card class="pay-style-wrapper">
                    支付方式占比
                    <div id="pay" style="width:300px;height:300px"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script type="text/ecmascript-6">
import echarts from 'echarts';
export default {
    data() {
        return {
            gateway_total_count: 0,
            device_total_count:0,
            order_count: 0,
            total_profit: 0
        }
    },
    created() {
        this.getGatewayCount();
        this.getDeviceCount();
        this.getOrderCount();
        this.getTotalProfit();
        this.getProfit();
    },
    mounted() {
        this.payChart();
    },
    methods: {
        getGatewayCount() {
            this.axios.get('/api/statistics/gateway/count').then( res => {
                this.gateway_total_count = res.data.data.gateway_total_count;
            })
        },
        getDeviceCount() {
            this.axios.get('/api/statistics/device/count').then( res => {
                this.device_total_count = res.data.data.device_total_count;
            })
        },
        getOrderCount() {
            this.axios.get('/api/orders/count').then( res => {
                this.order_count = res.data.data.order_count;
            })
        },
        getTotalProfit() {
            this.axios.get('/api/orders/total_profit').then( res => {
                this.total_profit = res.data.data.total_profit;
            })
        },
        getProfit() {
            this.axios.get('/api/statistics/profit/daily').then( res => {
                let dateList = [];
                let valueList = [];
                dateList = res.data.data.map(item => {
                    return item.date;
                })
                valueList = res.data.data.map(item => {
                    return item.profit;
                })
                this.profitChart(dateList,valueList);
            })
        },
        profitChart(dateList,valueList) {
            var profitChart = echarts.init(document.getElementById('profit'));
            let option = {
                // Make gradient line here
                visualMap: [{
                    show: false,
                    type: 'continuous',
                    seriesIndex: 0,
                    min: 0,
                    max: 400
                }],
                title: [{
                    left: 'center',
                    // text: 'Gradient along the y axisd'
                }],
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: [{
                    data: dateList
                }],
                yAxis: [{
                    splitLine: {show: false}
                }],
                grid: [{
                    bottom: '10%'
                }],
                series: [{
                    type: 'line',
                    showSymbol: false,
                    data: valueList
                }]
            };
            profitChart.setOption(option);
        },
        payChart() {
            let payChart = echarts.init(document.getElementById('pay'));
            let option = {
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['微信支付','余额支付']
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:310, name:'微信支付'},
                            {value:1548, name:'余额支付'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            payChart.setOption(option);
        }
    }
};
</script>

<style lang="stylus">
.chart-wrapper
    .el-card
        margin :15px
    .comsume-power-wrapper
    .charge-abnormal-wrapper
    .profit-wrapper
    .eqiupment-dlivery-wrapper
        .gateway, .device
            display :inline-block
            vertical-align :middle
            margin :10px 20px 0
            font-size :15px
            .count
                margin-top :10px
                font-size :30px
    .pay-style-wrapper
        font-size :15px
</style>


